@import "~antd/lib/style/themes/default.less";
@import "./colorful.less";

.ex-editor {
    &-list {
        .content {
            padding: 3px;

            .v-list {
                margin-top: 3px;

                .ant-list-header {
                    padding: 8px 12px;
                    font-weight: bold;
                    background-color: @primary-color;
                    color: white;
                    border-top-right-radius: 3px;
                    border-top-left-radius: 3px;
                }

                .checked-all {
                    .ant-checkbox {
                        border: solid 1px @primary-color !important;
                    }

                    .ant-checkbox-checked {
                        border: solid 1px white !important;
                        border-radius: 3px;
                    }
                }
            }

            .v-list-item {
                height: 36px;
                line-height: 36px;
                padding-left: 12px;
            }

            .v-list-item:hover {
                background-color: #e7e8e8;
                cursor: pointer;
            }

            .v-list-right {
                padding-right: 12px;
                text-align: right;
            }

            .v-list-switch {
                text-align: right;
                padding-top: 6px;

                .ant-switch {
                    background-color: @color-spec;
                }

                .ant-switch-checked {
                    background-color: @primary-color;
                }
            }
        }
    }

    &-table {
        .ant-table-thead {
            height: 39px !important;
            min-height: 39px !important;
        }
    }

    &-center {
        text-align: center !important;

        .ant-upload-picture-card-wrapper {
            max-width: 110px !important;
        }
    }

    &-dialog {

        .group {
            width: 100%;

            .item {
                float: left;
                padding: 3px;
            }
        }

        .all {
            padding: 8px 3px;
            width: 100%;
            border-top: dashed 1px @primary-color;
            margin: 3px 0;
        }

        .checked-content {
            padding: 6px;
        }

        .button {
            width: 100%;
            text-align: center;
        }

        .input {
            margin: 6px;

            .input-label {
                text-align: right;
                line-height: 32px;
            }
        }

        .button-active {
            padding: 6px;
            width: 100%;
            text-align: center;
            background-color: @primary-color;

            button {
                min-width: 90px;
                border-radius: 16px;
            }

            .ant-btn-primary {
                border: solid 1px white;
                margin-left: 8px;
            }
        }
    }
}

.ex-container {
    &-drawer {
        z-index: 980;

        .ant-drawer-body {
            padding: 0 6px !important;
        }
    }

    &-popover {
        z-index: 960;

        .ant-popover-title {
            height: 47px;
            padding: 12px 18px;
            background-color: #C9C9C9;

            .ant-col {
                padding-top: 0 !important;
            }
        }

        .ant-popover-content {
            .ant-popover-arrow {
                background-color: #C9C9C9;
                border-color: #C9C9C9;
            }

            .ant-popover-inner {
                .ant-popover-inner-content {
                    padding: 0;
                }
            }
        }
    }
}

.djs-connection {
    .djs-visual {
        path {
            opacity: 0.3 !important;
            stroke-dasharray: 2 2;
        }
    }
}

.ex-bpmn-end {
    // 节点中间内容填充成完成专用颜色
    &:not(.djs-connection) .djs-visual {
        path {
            fill: @flow-end !important;
        }
    }

    // 激活时专用颜色
    &:not(.djs-connection) .djs-visual > :nth-child(1) {
        fill: #f6ffed !important; /* color elements as green */
        stroke: @flow-end !important;
    }

    // 文字颜色
    .djs-label {
        fill: @flow-end !important;
    }

    // 激活专用色
    .djs-visual {
        path {
            stroke: @flow-end !important;
            opacity: 1 !important;
            stroke-dasharray: 0;
        }
    }

    // 文件起点颜色
    &-label .djs-label {
        fill: @flow-end !important;
    }
}


.ex-bpmn-error {
    &:not(.djs-connection) .djs-visual > :nth-child(1) {
        fill: #FFF0F5 !important; /* color elements as green */
        stroke: @flow-error !important;
    }

    .djs-label {
        fill: @flow-error !important;
    }

    .djs-visual {
        path {
            stroke: @flow-error !important;
            opacity: 1 !important;
            stroke-dasharray: 0;
        }
    }

    &-label .djs-label {
        fill: @flow-error !important;
    }
}

.ex-bpmn-active {
    &:not(.djs-connection) .djs-visual > :nth-child(1) {
        fill: #f0f5ff !important; /* color elements as green */
        stroke: @flow-active !important;
    }

    .djs-label {
        fill: @flow-active !important;
    }

    .djs-visual {
        path {
            stroke: @flow-active !important;
            opacity: 1 !important;
            stroke-dasharray: 0;
        }
    }

    &-label .djs-label {
        fill: @flow-active !important;
    }
}

.ex-flow-menu {
    background-color: #EFF0F0;
}

.ex-flow-queue {
    .toolbar {
        height: 36px;
        margin-bottom: 2px;

        .open-button {
            border-radius: 16px;
        }

        .search {
            padding-right: 8px;
        }
    }
}

// --------------------- Screen Resolution ---------------------
// Pre Definition
@mod-auth-region-menu: 480px; // 权限设置 -> 菜单权限
// 1024 x 768
@media (max-width: 1024px) {
    @mod-auth-region-menu: 480px;
}

// 1280 x 1024
@media (min-width: 1025px) and (max-width: 1260px) {
    @mod-auth-region-menu: 510px;
}

// 1366 x 720
@media (min-width: 1281px) and (max-width: 1366px) {
    @mod-auth-region-menu: 480px;
}

// 1400 x 900
@media (min-width: 1367px) and (max-width: 1440px) {
    @mod-auth-region-menu: 510px;
}

// 1680 x 1050
@media (min-width: 1441px) and (max-width: 1680px) {
    @mod-auth-region-menu: 540px;
}

// 1920 x 1200, 1920 x 1080
@media (min-width: 1681px) {
    @mod-auth-region-menu: 540px;
}